import React, { useEffect, useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'

const Index = () => {
    // 1. 容器
    const [list, setList] = useState([]);

    // 2. 请求函数
    const fetchList = async () => {
        fetch('/api/list').then(resp => resp.json()).then(data => {
            setList(data.data)
        })
    }

    // 3. 副作用函数
    useEffect(() => {
        fetchList();
    }, [])

    // 4. 获取 跳转 HOOKS 
    const navigate = useNavigate()

    return (
        <div>
            {
                list.map((v, i) => {
                    return (
                       
                            <dl key={i} onClick={() => navigate(`/detail/${v.id}`, {
                                
                            })}>
                                <dt>
                                    <img src={v.image} alt="" />
                                </dt>
                                <dd>{v.title}</dd>
                            </dl>
                     
                    )

                })
            }
        </div>
    )

}

export default Index